<template>
    <div>
        <van-checkbox-group v-model="result">
            <van-swipe-cell v-for="(item,index) in list" :key="index">
                <van-row>
                    <van-col span="3" class="chk">
                        <van-checkbox :name='item'></van-checkbox>
                    </van-col>
                    <van-col span="21">
                        <van-card :price="item.price" :title="item.shopname" :thumb="item.img">
                            <template #footer>
                                <van-stepper v-model="item.num" />
                            </template>
                        </van-card>
                    </van-col>
                </van-row>
                <template #right>
                    <van-button square text="删除" type="danger" class="delete-button" @click="del(index,item)" />
                </template>
            </van-swipe-cell>
        </van-checkbox-group>

        <van-submit-bar :price="allPrice" button-text="提交订单">
            <van-checkbox v-model="checked">全选</van-checkbox>
        </van-submit-bar>
    </div>
</template>

<script>

export default {
    data() {
        return {
            list: [
                {
                    shopname: "小米鼠标",
                    price: "69.0",
                    img: "./img/mouse.png",
                    num: 0,
                },
                {
                    shopname: "小米音箱",
                    price: "99.9",
                    img: "./img/yin.jpg",
                    num: 0,
                },
                {
                    shopname: "彩虹电池",
                    price: "7.5",
                    img: "./img/dc.jpg",
                    num: 0,
                },
                {
                    shopname: "电插板",
                    price: "39.9",
                    img: "./img/Xb.jpg",
                    num: 0,
                },
            ],
            checked: false,
            result: [],
        };
    },
    computed: {
        allPrice(){
            let sum=0
            this.result.forEach(item => {
                sum+=item.price*item.num
            });
            return sum*100
        }
    },
    watch: {
        checked(newVal){
            if(newVal==true){
                this.result=this.list
            }else{
                this.result=[]
            }
        }
    },
    methods: {
        del(index,val){
            this.list.splice(index,1)
            console.log(val);
            this.result.forEach((item,index)=>{
                if(item==val){
                    this.result.splice(index,1)
                }
            })
        }
    },
};
</script>
<style lang="scss">
.delete-button{
    height: 100%;
}
.chk{
    padding: 50px 0 0 10px;
}
</style>